<template>
  <div class="course-detail">
    <p>
      <router-link to="/">首页</router-link>
      <span style="margin: 0 10px">/</span>
      <span style="font-weight: bold;">课程</span>
    </p>
    <!-- <Title /> -->
    <div class="content">
      <div class="head flex around" :style="{backgroundImage: `url(${require('@/assets/img/index/course-back.png')})`}">
        <h1 class="white">{{ course.classify_one_name }}</h1>
        <div class="info clearfix">
          <div class="left" style="margin-right: 20px;">
            <el-tag type="primary">简介</el-tag>
          </div>
          <div class="left desc " v-html="course.content"></div>
        </div>
        <ul class="flex">
          <li>
            <span class="white large">难度：{{ course.difficult_degree }}</span>
          </li>
          <li>
            <span class="white large">学习人数：{{ course.study_num }}</span>
          </li>
          <li>
            <span class="white large">知识点：{{ course.knowledge }}</span>
          </li>
          <li @click="handleCollect()">
            <span class="large white iconfont"
            style="cursor: pointer;"
             :class="course.collect_id && 'collected'">&#xe600; 收藏</span>
          </li>
        </ul>
      </div>
      <div class="body shadow flex between">
        <el-tabs v-model="activeTab" @tab-click="tabClick">
          <el-tab-pane label="课程简介" name="1">
            <div class="b-content" v-html="course.content">

            </div>
          </el-tab-pane>
          <el-tab-pane label="课程大纲" name="2">
            <Chapter :course="course" :chapterList="chapterList" />
          </el-tab-pane>
          <el-tab-pane label="常见问题" name="3">
            <div class="b-content question">
              <ul>
                <li class="shadow" v-for="(item, i) of course.questionList || []" :key="i">
                  <div>
                    <span class="bold large">问：</span>
                    <span>{{ item.qname }}</span>
                  </div>
                  <div>
                    <span class="bold large">答：</span>
                    <span>{{ item.answer }}</span>
                  </div>
                </li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="course-info shadow">
          <div class="imgbox" :style="{backgroundImage: `url(${course.show_tpdz})`}"></div>
          <div class="start">
            <el-button type="primary" @click="startStudy" round>开始学习</el-button>
          </div>
          <div class="progress flex item-center">
            <el-button type="primary" size="mini" plain>完成进度：</el-button>
            <el-progress style="flex: 1;margin-left: 10px;" :percentage="progress"></el-progress>
          </div>
          <div class="know">
            <h3>课程须知</h3>
            <ul>
              <li>1、需要遵守课堂纪律</li>
              <li>2、需要了解课程公约</li>
              <li>3、可以收藏课程，将优质的课程存入自己的收藏夹</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title'
import Api from '@/api'
import Chapter from '@/components/Chapter'
export default {
  components: {
    Title,
    Chapter
  },
  data() {
    return {
      course: {},
      chapterList: [],
      activeTab: '2',
      progress: 0, // 进度
    }
  },
  mounted() {
    this.getCourseInfo()
    this.getChapterList()
  },
  methods: {
    handleCollect() {
      Api.saveCollect({
        course_id: this.course.id,
        id: this.course.collect_id
      }).then(res => {
        this.$message.success(res.msg)
        this.course.collect_id = res.data
      })
    },
    startStudy() {
      if (!this.chapterList || !this.chapterList.length) {
        return this.$message.warning('没有可学习的章节')
      }
      let chapterId = null
      for (const item of this.chapterList) {
        if(item.childList && item.childList.length) {
          chapterId = item.childList[0].id
          break ;
        } else {
          chapterId = item.id
          break ;
        }
      }

      this.$router.push(`/study/${this.course.id}?cid=${chapterId}`)
    },
    // 获取课程信息
    async getCourseInfo() {
      const id = this.$route.params.id
      const { data } = await Api.getCourseInfo({id})
      this.course = data || {id}
    },
    // 获取课程大纲
    async getChapterList() {
      const id = this.$route.params.id
      const { data } = await Api.getChapterList({course_id: id})
      this.chapterList = data || []
      this.getProgress()
    },
    // 计算进度
    getProgress() {
      if (!this.chapterList.length) {
        return this.progress = 0
      }
      let p = 0
      let total = 0
      this.chapterList.forEach(item => {
        if (item.type == '0' ) {
          // 说明有二级
          if (item.childList && item.childList.length) {
            item.childList.forEach(child => {
              total++
              if ( '1' == child.is_complete) {
                p ++
              }
            })
          }
        } else {
          total++
          if ('1' == item.is_complete) {
            p++
          }
        }
      })
      this.progress = parseInt(p / total * 100)
    },
    
    tabClick(tab, e) {

    }
  }
}
</script>

<style lang="scss" scoped>
.collected {
  color: red;
}
.course-detail {
  padding-top: 40px;
  .content {
    margin: 20px 0;
    .head {
      // div,li,span,p {
      //   color: #fff !important;
      // }
      // height: 300px;
      padding: 30px;
      flex-direction: column;
      h1 {
        font-size: 32px;
      }
      .info {
        margin: 40px 0;
      }
      ul {
        &>li {
          &:not(:last-child) {
            margin-right: 100px;
          }
        }
      }
      
    }
    .body {
      padding: 20px;
      .el-tabs {
        flex: 2;
      }
      .course-info {
        flex: 1;
        // background: #ccc;
        position: relative;
        padding: 20px;
        margin-left: 20px;
        border-radius: 15px;
        .imgbox {
          height: 200px;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
        }

        .start {
          margin: 10px 0;
          text-align: center;
          padding: 0 20px;
          .el-button {
            width: 100%;
          }
        }
        .progress {
          margin-bottom: 10px;
        }
        .know {
          ul {
            li {
              padding: 7px 0;
            }
          }
        }
      }
      .b-content {
        min-height: 200px;
      }
      
      .question {
        li {
          padding: 10px;
        }
      }
    }
  }
}
</style>